<template>
  <div class="apiBox">
    <!--header-->
    <div class="apiHeader selectBlock flexTitlePadding">
      <div class="viewBoxTitle flexTitle">
        <span>共享能力（{{groupPathName}}）</span>
      </div>
      <el-row>
        <el-col :span="16">
          <div class="headerBtnAll" v-if="!isBatch&&isAdmin">
            <el-dropdown class="btnItem" size="small" split-button type="primary" @click="handleClickAddProject" @command="handleCommandAdd">
              <i class="el-icon-plus"></i><span style="display: inline-block;margin-left: 10px;">新建API项目</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="handleClickAddProject">新建项目</el-dropdown-item>
                <el-dropdown-item command="handleClickAddGrouping">新建分组</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <!--<el-button type="text" class="headerBtn btnItem"><i class="iconfont">&#xe671;</i><span class="headerBtnSize">导入</span></el-button>-->
            <el-button type="text" class="headerBtn btnItem" @click="toSetGroupMember"><i class="iconfont">&#xe748;</i><span class="headerBtnSize">分组权限管理</span></el-button>
            <el-button type="text" class="headerBtn btnItem" @click="batchChange(1)"><i class="iconfont">&#xe605;</i><span class="headerBtnSize">批量操作</span></el-button>
          </div>
          <div class="headerBtnAll" v-if="isBatch">
            <el-button type="text" @click="batchChange(2)" class="myButton">&nbsp<i class="el-icon-back"></i>&nbsp 取消批量 &nbsp&nbsp|</el-button>
            <el-button type="text" @click="moveByBatchHandle" class="myButton" :disabled='buttonDisabled'>&nbsp&nbsp 移动 &nbsp&nbsp|</el-button>
            <el-button type="text" @click="archiveByBatchHandle" class="myButton" :disabled='archiveButtonDisabled' :title="archiveButtonTitle">&nbsp&nbsp 归档 &nbsp&nbsp|</el-button>
            <el-button type="text" @click="deleteByBatchHandle" class="myButton" :disabled='buttonDisabled'>&nbsp&nbsp 删除 &nbsp&nbsp</el-button>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="headerBtnAll">
            <el-input placeholder="搜索API" @keyup.enter.native="fetchData" prefix-icon="el-icon-search" size="small" v-model="queryCondition.name"></el-input>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--content-->
    <!--表格-->
    <div class="elementTableBox apiContent">
      <el-table
        ref="apiProjectTable"
        v-if="tableShow"
        :data="tableData"
        size="small"
        max-height="400"
        stripe
        class="elementTable"
        header-cell-class-name="elementTableHeader"
        cell-class-name="elementTableBody"
        @row-click="tableRowHandleClick"
        @selection-change="selectionChangeHandle"
        highlight-current-row>
        <!--<el-table-column align="left" label='名称' min-width="70px" prop="name" :render-header="renderHeader">-->
        <!--<template slot-scope="scope">-->
        <!--<div v-if="scope.row.name === '' || scope.row.name === undefined">-->
        <!--<span class="returnBtn" @click.native.stop="returnListFun"><i class="el-icon-back"></i> 返回上一级目录</span>-->
        <!--</div>-->
        <!--<div v-else>-->
        <!--<i class="iconfont" v-if="scope.row.groupId !== '' && scope.row.groupId !== undefined">&#xe7c2;</i>-->
        <!--{{scope.row.name}}-->
        <!--</div>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--:render-header="renderHeader"-->
        <el-table-column :key="Math.random()" :selectable="dataSelectable" align="center"type="selection" width="55" v-if="isBatch"></el-table-column>
        <el-table-column :key="Math.random()" align="left" label='名称' min-width="70px" prop="name">
          <template slot-scope="scope">
            <span v-if="scope.row.dataType==0">
              <i class="el-icon-back myTableIcon"></i> {{scope.row.name}}
            </span>
            <span v-if="scope.row.dataType==1">
              <i class="el-icon-message myTableIcon"></i> {{scope.row.name}}
            </span>
            <span v-if="scope.row.dataType==2">
              <span v-if="scope.row.isArchive==1" class="myArchiveSpan">归档</span>
              {{scope.row.name}}
            </span>
          </template>
        </el-table-column>
        <el-table-column :key="Math.random()" align="center" label="版本号" width="80px" prop="version"></el-table-column>
        <el-table-column :key="Math.random()" align="center" label="类型" width="80px" prop="type">
          <template slot-scope="scope">
            <span>{{scope.row.type | typeFilter}}</span>
          </template>
        </el-table-column>
        <el-table-column :key="Math.random()" align="center" label="最后更新时间" width="160px" prop="etime"></el-table-column>
        <el-table-column :key="Math.random()" align="center" label="排序号" width="60px" prop="sort"></el-table-column>
        <el-table-column :key="Math.random()" align="center" label="操 作" width="260px" v-if="!isBatch" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <div class="tableOperatuib" v-if="scope.row.isDisplayButton && scope.row.dataType==1">
              <!--<el-button type="text" @click.native.stop="openNewTab">新标签打开</el-button>-->
              <el-button type="text" @click.native.stop="handleClickEditGroup(scope.row)">编辑</el-button>
              <el-dropdown style="margin-left: 10px;cursor: pointer;" trigger="click" @click.native.stop="clearEvent">
                <span class="el-dropdown-link">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native.stop="moveGroup(scope.row)">移动</el-dropdown-item>
                  <el-dropdown-item @click.native.stop="deleteGroup(scope.row)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="tableOperatuib" v-if="scope.row.isDisplayButton && scope.row.dataType==2">
              <!--<el-button type="text" @click.native.stop="openNewTab">新标签打开</el-button>-->
              <el-button type="text" @click.native.stop="handleClickEditProject(scope.row)">编辑</el-button>
              <el-dropdown style="margin-left: 10px;cursor: pointer;" trigger="click" @click.native.stop="clearEvent">
                <span class="el-dropdown-link">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native.stop="toSetProjectMember(scope.row)">设置成员</el-dropdown-item>
                  <el-dropdown-item @click.native.stop="moveProject(scope.row)">移动</el-dropdown-item>
                  <el-dropdown-item @click.native.stop="doCopyProject(scope.row)">复制</el-dropdown-item>
                  <el-dropdown-item v-if="scope.row.isArchive==0" @click.native.stop="archiveProject(1, scope.row)" >归档</el-dropdown-item>
                  <el-dropdown-item v-if="scope.row.isArchive==1" @click.native.stop="archiveProject(2, scope.row)" >取消归档</el-dropdown-item>
                  <el-dropdown-item @click.native.stop="deleteProject(scope.row)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <paging :size-change="pageSizeChange" :current-change="pagingQuery" :page-sizes="pageSizes" :total-num="pagingArgs.totalCount"></paging>
      </div>
    </div>
    <!--dialog 项目项目-->
    <el-dialog v-if="dialogVisibleDetailProject" custom-class="dhcWebLayer" top="20px" :close-on-click-modal="false"
               :destroy-on-close="true" :title="dialogTitleProject" :visible.sync="dialogVisibleDetailProject" width="40%">
      <project-detail  :componentCustomProps="componentCustomProps" @closeDialog="closeDialog"></project-detail>
    </el-dialog>
    <!--dialog 分组项目-->
    <el-dialog v-if="dialogVisibleDetailGroup" custom-class="dhcWebLayer" top="30px" :close-on-click-modal="false"
               :destroy-on-close="true"  :title="dialogTitleGroup" :visible.sync="dialogVisibleDetailGroup" width="40%">
      <group-detail  :componentCustomProps="componentCustomProps" @closeDialog="closeDialog"></group-detail>
    </el-dialog>

    <el-dialog v-if="dialogVisibleSelectGroup" custom-class="dhcWebLayer" top="30px" :close-on-click-modal="false"
               :destroy-on-close="true"  title="项目分组" :visible.sync="dialogVisibleSelectGroup" width="40%">
      <group-select :componentCustomProps="componentCustomProps" @closeDialog="closeSelectGroupDialog"></group-select>
    </el-dialog>

    <el-dialog v-if="dialogVisibleProjectCopy" custom-class="dhcWebLayer" top="30px" :close-on-click-modal="false"
               :destroy-on-close="true"  title="项目复制" :visible.sync="dialogVisibleProjectCopy" width="40%">
      <project-copy :componentCustomProps="componentCustomProps" @closeDialog="closeProjectCopyDialog"></project-copy>
    </el-dialog>

    <el-dialog v-if="dialogVisibleGroupMember" custom-class="dhcWebLayer" top="30px" :close-on-click-modal="false"
               :destroy-on-close="true"  title="分组成员" :visible.sync="dialogVisibleGroupMember" width="60%">
      <group-member :componentCustomProps="componentCustomProps" @closeDialog="closeDialog"></group-member>
    </el-dialog>

    <el-dialog v-if="dialogVisibleProjectMember" custom-class="dhcWebLayer" top="30px" :close-on-click-modal="false"
               :destroy-on-close="true"  title="项目成员" :visible.sync="dialogVisibleProjectMember" width="60%">
      <project-member :componentCustomProps="componentCustomProps" @closeDialog="closeDialog"></project-member>
    </el-dialog>
  </div>
</template>

<script>
  import paging from '@/components/demoAssembly/paging' // 分页
  import groupDetail from './components/groupDetail'
  import projectDetail from './components/projectDetail'
  import groupSelect from './components/groupSelect'
  import projectCopy from './components/projectCopy'
  import groupMember from './components/groupMember'
  import projectMember from './components/projectMember'

  import {
    selectProjectGroupAndMemberType,
    selectListByGroupId,
    moveProjectAndGroup,
    updateIsArchive,
    deleteGroupAndProject,
    deleteForceAndGroupByBatch
  } from '@/api/apiModel/apiProject.js'

  const typeKeyValue = {
    '1': 'Web',
    '2': 'App',
    '3': 'PC',
    '4': '硬件/物联网',
    '9': '其他'
  }

  export default {
    name: 'rdManagement',
    components: {
      paging,
      groupDetail,
      projectDetail,
      groupSelect,
      projectCopy,
      groupMember,
      projectMember
    },
    data() {
      return {
        pageSizes: [20, 50, 100, 200],
        // 分页参数
        pagingArgs: {
          currentPageNo: 1,
          totalCount: 0
        },
        tableData: [], // 列表数据
        queryArgs: {
          sort: [
            {
              property: 'sort',
              direction: 'ASC'
            }
          ],
          rowBounds: {
            offset: 0,
            limit: 20
          }
        },
        // 查询参数
        queryCondition: {
          name: ''
        },
        showRow: false,
        tableShow: false, // 控制表格显示隐藏
        dialogVisibleDetailProject: false, // 项目弹出层显示隐藏
        dialogVisibleDetailGroup: false, // 分组弹出层显示隐藏
        dialogVisibleSelectGroup: false,
        dialogVisibleProjectCopy: false,
        dialogVisibleGroupMember: false,
        dialogVisibleProjectMember: false,
        dialogTitleProject: '',
        dialogTitleGroup: '',
        tableHeadTit: ['根目录'],
        // tableData: [ // 定义表格数据
        //   {
        //     groupId: '',
        //     name: 'APIManagementDemoProject',
        //     version: 'V 1.0',
        //     label: 'Web',
        //     endTime: '2020-06-01 13:40:01'
        //   }
        // ]
        allParentGroup: [],
        curParentGroupId: '****',
        curParentGroupName: '根目录',
        groupPathName: '根目录',
        componentCustomProps: {},
        isBatch: false,
        buttonDisabled: true,
        archiveButtonDisabled: true,
        archiveButtonTitle: '',
        selectGroupIds: [],
        selectProjectIds: [],
        isAdmin: false,
        isNotReadonly: false
      }
    },
    created() {
      this.initPage()
    },
    mounted() {
      // console.log(this.$route)
      // 查询分组列表
      this.fetchData()
    },
    filters: {
      typeFilter(target) {
        return typeKeyValue[target]
      }
    },
    methods: {
      initPage() {
        //
        this.getUserPri('****')
      },
      getUserPri(groupId) {
        this.isAdmin = false
        selectProjectGroupAndMemberType(groupId).then(res => {
          let tempData = res.data.data
          if (tempData) {
            if (tempData.memberType === '0') {
              this.isAdmin = true
            }
          }
        })
      },
      pageSizeChange(val) {
        this.queryArgs.rowBounds.limit = val
        this.queryArgs.rowBounds.offset = 0
        this.pagingArgs.currentPageNo = 1
        this.fetchData()
      },
      sortChange(col) {
        //
        if (col.prop) {
          let tempDirection = 'ASC'
          if (col.order === 'descending') {
            tempDirection = 'DESC'
          }
          const sort = {
            property: col.prop,
            direction: tempDirection
          }
          this.queryArgs.sort = []
          this.queryArgs.sort.push(sort)
          this.fetchData()
        }
      },
      pagingQuery(val) { // 分页
        this.queryArgs.rowBounds.offset = (val - 1) * this.queryArgs.rowBounds.limit
        this.pagingArgs.currentPageNo = val
        this.fetchData()
      },
      buildQueryConditions() {
        let tempQueryCondition = []

        for (let key in this.queryCondition) {
          let queryValue = this.queryCondition[key]
          if (queryValue != null && queryValue !== '') {
            let queryProperty = key
            let type = 'LIKE'
            tempQueryCondition.push({
              property: queryProperty,
              type: type,
              value: queryValue
            })
          }
        }
        return tempQueryCondition
      },
      clearQueryConditions() {
        for (let key in this.queryCondition) {
          this.queryCondition[key] = ''
        }
      },
      handleClickAddProject() { // 新增项目
        this.dialogVisibleDetailProject = true
        this.dialogTitleProject = '新增项目'
        this.componentCustomProps = {}
        this.componentCustomProps.busiId = ''
        this.componentCustomProps.openType = 'add'
        this.componentCustomProps.groupId = this.curParentGroupId
      },
      handleClickEditProject(record) { // 编辑项目
        this.dialogVisibleDetailProject = true
        this.dialogTitleProject = '编辑项目'
        this.componentCustomProps = {}
        this.componentCustomProps.busiId = record.id
        this.componentCustomProps.openType = 'edit'
      },
      handleClickAddGroup() { // 新增分组
        this.dialogVisibleDetailGroup = true
        this.dialogTitleGroup = '新增分组'
        this.componentCustomProps = {}
        this.componentCustomProps.busiId = ''
        this.componentCustomProps.openType = 'add'
        this.componentCustomProps.groupId = this.curParentGroupId
      },
      handleClickEditGroup(record) { // 编辑分组
        this.dialogVisibleDetailGroup = true
        this.dialogTitleGroup = '编辑分组'
        this.componentCustomProps = {}
        this.componentCustomProps.busiId = record.id
        this.componentCustomProps.openType = 'edit'
      },
      closeDialog(isRefresh) { // 关闭弹出层
        this.dialogVisibleDetailProject = false
        this.dialogVisibleDetailGroup = false
        this.dialogVisibleGroupMember = false
        this.dialogVisibleProjectMember = false
        if (isRefresh) {
          this.fetchData()
        }
      },
      handleCommandAdd(val) { // 新增按钮 下拉框菜单项
        switch (val) {
          case 'handleClickAddProject':
            this.handleClickAddProject()
            break
          case 'handleClickAddGrouping':
            this.handleClickAddGroup()
            break
        }
      },
      tableRowHandleClick(row) { // 表格行点击事件
        if (!this.isBatch) {
          if (row.dataType === 0) {
            let tempGroupPathName = '根目录'
            if (this.allParentGroup && this.allParentGroup.length > 0) {
              // 删除最后一个元素
              this.allParentGroup.pop()
              if (this.allParentGroup.length > 0) {
                let curParentGroup = this.allParentGroup[this.allParentGroup.length - 1]
                this.curParentGroupId = curParentGroup.id
                this.curParentGroupName = curParentGroup.name
                this.allParentGroup.forEach((item, index) => {
                  tempGroupPathName += ' / ' + item.name
                })
              } else {
                this.curParentGroupId = '****'
                this.curParentGroupName = '根目录'
              }
            } else {
              this.curParentGroupId = '****'
              this.curParentGroupName = '根目录'
            }
            this.groupPathName = tempGroupPathName
            this.getUserPri(this.curParentGroupId)
            this.fetchData()
          } else if (row.dataType === 1) {
            this.curParentGroupId = row.id
            this.curParentGroupName = row.name
            this.allParentGroup.push(row)
            this.groupPathName = this.groupPathName + ' / ' + row.name
            // console.log(this.allParentGroup)
            this.getUserPri(this.curParentGroupId)
            this.fetchData()
          } else if (row.dataType === 2) {
            let projectId = row.id
            this.$store.commit('SET_ISCHILDMENUSHOW', true)
            this.$store.commit('SET_PROJECTID', projectId)
            this.$router.push({
              name: 'projectApi',
              query: { projectId }
            })
          }
        } else {
          if (row.dataType !== 0) {
            this.$refs.apiProjectTable.toggleRowSelection(row)
          }
        }
      },
      clearEvent() {
        //
      },
      moveGroup(record) {
        //
        this.$confirm('分组移动后，原分组及分组内项目的用户访问权限将会改变。您可能需要在移动分组之后重新设置相应的用户访问权限。确定移动吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.selectGroupIds = []
          this.selectProjectIds = []
          this.selectGroupIds.push(record.id)
          this.componentCustomProps = {}
          this.componentCustomProps.curGroupId = this.curParentGroupId
          this.dialogVisibleSelectGroup = true
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消移动'
          })
        })
      },
      deleteGroup(record) {
        //
        this.$confirm('是否删除该分组以及分组内的所有项目？该操作无法恢复数据，请谨慎操作！?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let projectGroupIds = []
          projectGroupIds.push(record.id)
          this.deleteRecord({
            projectGroupIds: projectGroupIds
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          })
        })
      },
      moveProject(record) {
        this.$confirm('项目移动后，用户访问权限将会改变。您可能需要在移动项目之后重新设置相应的用户访问权限。确定移动吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.selectGroupIds = []
          this.selectProjectIds = []
          this.selectProjectIds.push(record.id)
          this.componentCustomProps = {}
          this.componentCustomProps.curGroupId = this.curParentGroupId
          this.dialogVisibleSelectGroup = true
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消移动'
          })
        })
      },
      doCopyProject(record) { // 表格操作 - 更多 - 复制
        this.componentCustomProps = {}
        this.componentCustomProps.projectId = record.id
        this.componentCustomProps.projectName = record.name
        this.componentCustomProps.projectType = record.type
        this.componentCustomProps.projectVersion = record.version
        this.dialogVisibleProjectCopy = true
      },
      archiveProject(type, record) { // 表格操作 - 更多 - 归档
        // console.log('归档')
        let projectIds = []
        projectIds.push(record.id)
        let isArchive = 1
        if (type === 2) {
          isArchive = 0
        }
        this.archiveRecord({
          projectIds: projectIds,
          isArchive: isArchive
        })
      },
      deleteProject(record) { // 表格操作 - 更多 - 删除
        this.$confirm('项目删除后，所有项目内数据均会被删除，并且无法恢复数据，请谨慎操作！?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let projectIds = []
          projectIds.push(record.id)
          this.deleteRecord({
            projectIds: projectIds
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          })
        })
      },
      closeSelectGroupDialog(type, data) {
        this.dialogVisibleSelectGroup = false
        if (type === 1 && data) {
          this.moveRecord({
            projectIds: this.selectProjectIds,
            projectGroupIds: this.selectGroupIds,
            toGroupId: data.id
          })
        }
      },
      closeProjectCopyDialog(isRefresh) {
        this.dialogVisibleProjectCopy = false
        if (isRefresh) {
          this.fetchData()
        }
      },
      moveRecord(args) {
        // console.log(args)
        moveProjectAndGroup(args).then(res => {
          if (res.data.success) {
            this.$message({
              type: 'success',
              message: '操作成功！'
            })
            this.fetchData()
          } else {
            this.$message({
              type: 'error',
              message: '操作失败！'
            })
          }
        })
      },
      archiveRecord(args) { // 表格操作 - 更多 - 归档
        updateIsArchive(args).then(res => {
          if (res.data.success) {
            this.$message({
              type: 'success',
              message: '操作成功！'
            })
            this.fetchData()
          } else {
            this.$message({
              type: 'error',
              message: '操作失败！'
            })
          }
        })
      },
      deleteRecord(args) {
        // console.log(args)
        deleteForceAndGroupByBatch(args).then(res => {
          if (res.data.success) {
            this.$message({
              type: 'success',
              message: '操作成功！'
            })
            this.fetchData()
          } else {
            this.$message({
              type: 'error',
              message: '操作失败！'
            })
          }
        })
      },

      handleSizeChange() { // pageSize 改变时会触发

      },
      handleCurrentChange() { // currentPage 改变时会触发

      },
      fetchData() {
        this.clearBacthSelect()
        this.queryArgs.condition = this.buildQueryConditions()
        this.tableData = []
        let tempTableData = []
        if (this.curParentGroupId !== '****') {
          tempTableData.push({
            dataType: 0,
            id: this.curParentGroupId,
            name: '返回上一级目录',
            groupId: this.curParentGroupId,
            groupName: ''
          })
        }

        selectListByGroupId(this.queryArgs, this.curParentGroupId).then(res => {
          // console.log(res.data)
          let tempData = res.data.data
          if (tempData) {
            let isDisplayButton = false
            let projectGroupList = tempData.projectGroupList
            if (projectGroupList && projectGroupList.length > 0) {
              projectGroupList.forEach((item, index) => {
                isDisplayButton = false
                if (item.memberType === '0') {
                  isDisplayButton = true
                }
                tempTableData.push({
                  dataType: 1,
                  id: item.id,
                  name: item.name,
                  sort: item.sort,
                  memberType: item.memberType,
                  isDisplayButton: isDisplayButton
                })
              })
            }

            let projectList = tempData.projectList
            if (projectList && projectList.length > 0) {
              projectList.forEach((item, index) => {
                isDisplayButton = false
                if (item.memberType === '0') {
                  isDisplayButton = true
                }
                item.dataType = 2
                item.version = 'V ' + item.version
                item.isDisplayButton = isDisplayButton
                tempTableData.push(item)
              })
            }

            this.tableData = tempTableData
            this.pagingArgs.totalCount = tempData.count
            if (tempTableData.length > 0) {
              this.tableShow = true
            }
          }
        })
      },
      toSetGroupMember() {
        //
        this.componentCustomProps = {}
        this.componentCustomProps.groupId = this.curParentGroupId
        this.componentCustomProps.groupName = this.curParentGroupName
        this.dialogVisibleGroupMember = true
      },
      toSetProjectMember(record) {
        //
        this.componentCustomProps = {}
        this.componentCustomProps.projectId = record.id
        this.componentCustomProps.projectName = record.name
        this.dialogVisibleProjectMember = true
      },
      batchChange(type) {
        if (type === 1) {
          this.isBatch = true
        } else {
          this.$refs.apiProjectTable.clearSelection()
          this.isBatch = false
        }
      },
      dataSelectable(row, index) {
        return !(row.dataType === 0)
      },
      selectionChangeHandle(selection) {
        // 清空选择记录
        this.clearBacthSelect()
        if (selection && selection.length > 0) {
          selection.forEach((item, index) => {
            //
            if (item.dataType === 1) {
              this.selectGroupIds.push(item.id)
            } else if (item.dataType === 2) {
              this.selectProjectIds.push(item.id)
            }
          })
        }
        if (this.selectGroupIds.length > 0 || this.selectProjectIds.length > 0) {
          this.buttonDisabled = false
        }

        this.archiveButtonTitle = ''
        if (this.selectGroupIds.length <= 0 && this.selectProjectIds.length > 0) {
          this.archiveButtonDisabled = false
        } else {
          if (this.selectGroupIds.length > 0) {
            this.archiveButtonTitle = '选择分组时，无法使用归档操作'
          }
        }
      },
      clearBacthSelect() {
        this.selectGroupIds = []
        this.selectProjectIds = []
        this.archiveButtonTitle = ''
        this.buttonDisabled = true
        this.archiveButtonDisabled = true
      },
      moveByBatchHandle() {
        this.$confirm('项目分组或项目移动后，原分组及分组内项目的用户访问权限将会改变。您可能需要在移动之后重新设置相应的用户访问权限。确定移动吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.componentCustomProps = {}
          this.componentCustomProps.curGroupId = this.curParentGroupId
          this.dialogVisibleSelectGroup = true
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消移动'
          })
        })
      },
      archiveByBatchHandle() {
        this.archiveRecord({
          projectIds: this.selectProjectIds,
          isArchive: 1
        })
      },
      deleteByBatchHandle() {
        this.$confirm('项目分组或项目删除后，所有项目数据均会被删除，并且无法恢复数据，请谨慎操作！?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRecord({
            projectIds: this.selectProjectIds,
            projectGroupIds: this.selectGroupIds
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消移动'
          })
        })
      }
    }
  }
</script>

<style scoped>
  .returnBtn{
    line-height: 40px;
    display: block;
    box-sizing: border-box;
    color: #333;
    font-size: 14px;
    cursor: pointer;
  }
  /*.returnBtn:hover{*/
  /*color: #409EFF;*/
  /*}*/
  .myTableIcon{
    font-weight: bold;
    font-size: 20px;
    padding-right: 5px;
  }
  .myArchiveSpan{
    display: inline-block;
    width: 40px;
    line-height: 22px;
    text-align: center;
    background-color: #8b8b8b;
    color: white;
    margin-right: 5px;
    border-radius: 3px;
  }

  /*.myButton{*/
  /*color: #1f2d3d;*/
  /*}*/
  /*.myButton:hover{*/
  /*color: #409EFF;*/
  /*}*/
  /*.myButton.is-disabled, .myButton.is-disabled:focus, .myButton.is-disabled:hover {*/
  /*color: #C0C4CC;*/
  /*}*/
</style>
